<template>
  <div>
    <el-input
      class="input-new-tag"
      v-if="inputVisible"
      v-model="inputValue.name"
      ref="saveTagInput"
      size="medium"
      effect="plain"
      placeholder="输入内容"
    >
      <template slot="append">
        <el-upload
          ref="upload"
          list-type="picture"
          accept=".jpg,.png"
          :action="'#'"
          :auto-upload="false"
          :show-file-list="false"
          :file-list="fileList"
          :on-change="getFile"
          :before-remove="()=>false"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <el-button v-else icon="el-icon-upload"></el-button>
        </el-upload>
        <el-button @click="handleInputConfirm">确认</el-button>
      </template>
    </el-input>
    <el-button v-else class="button-new-tag" size="medium" @click="showInput"
      >+ {{ label }}</el-button
    >
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: "默认标题",
    },
  },
  data() {
    return {
      // 输入框的值
      // inputValue: "",

      //收集输入的数据
      inputValue:{
        pid:'',
        type:'',
        name:'',
        base64:'',
        format:'.jpg',
        consultType:{
          type:'',
        },
      },
      //上传的图标
      imageUrl: '',

      fileList:[],

      // 控制显示输入框
      inputVisible: false,
    };
  },
  methods: {
    //   显示输入框
    showInput() {
      const _this = this;

      _this.inputVisible = true;
      _this.$nextTick((_) => {
        _this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    // 点击确认传递回父组件
    handleInputConfirm() {
      const _this = this;
      if(!_this.inputValue.name || !_this.inputValue.base64){
        this.$message.error('请输入内容和上传图标!');
        return
      }else{
        _this.$emit("Event-blurInput", _this.inputValue);
     
          _this.inputValue = {
        pid:'',
        type:'',
        name:'',
        base64:'',
        format:'.jpg',
        consultType:{
          type:'',
        },
      };
        _this.inputVisible = false;
      }
    },

    //通过getFile方法获取文件信息
    getFile(file, fileList) {
      //上传判断
      const isJPG = file.raw.type === 'image/jpeg';
      const isLt2M = file.raw.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
        return
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
        return
      }

      if (fileList&&fileList.length>1) {
        fileList.shift();
      }
      this.imageUrl=file.url
      this.getBase64(file.raw).then(res => {
          const params = res
          this.inputValue.base64 = params.split(',')[1]
          this.$message({
            type: "success",
            message: "上传成功!",
          });
      })
      // console.log(this.inputValue);
    },

    // 图片转base64编码：
    getBase64(file) {
      return new Promise(function (resolve, reject) {
          const reader = new FileReader()
          let imgResult = ''
          reader.readAsDataURL(file)
          reader.onload = function () {
              // console.log(reader.result,'reader.result')
              imgResult = reader.result
          }
          reader.onerror = function (error) {
              reject(error)
          }
          reader.onloadend = function () {
              resolve(imgResult)
          }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.input-new-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e6ebf5;
  display: flex;
}
::v-deep .input-new-tag .el-input__inner {
  width: 100%;
  border: 0;
  height: 47px;
  line-height: 47px;
  background-color: #f8f8f8;
}
::v-deep .input-new-tag .el-input-group__append{
  display: flex;
  align-items: center;
  width: auto;
  padding: 0 10px;
  border: 0;
  border-left: 1px solid #f8f8f8;
  background-color: #f8f8f8;
}
::v-deep .input-new-tag .el-input-group__append>div{
  margin-right: 25px;
}
::v-deep .input-new-tag .el-input-group__append .el-icon-upload{
  font-size: 20px;
}
::v-deep .input-new-tag .el-input-group__append>button{
  padding-left: 0;
}
.el-upload .avatar{
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.button-new-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  border: 0;
  display: block;
  width: 100%;
  font-size: 16px;
  padding: 15px 20px;
  background-color: #f8f8f8;
  border-top: 1px solid #e6ebf5;
}
</style>